<template>
  <el-dialog :title="title" :visible.sync="visible" width="1200px" append-to-body>
    <div class="titleDiv">基础信息</div>
    <el-form ref="form" inline :model="form" :rules="rules" label-width="170px">
    <!--  基础信息    -->
      <el-form-item label="机构名称" prop="orgName">
        <el-input
          v-model="form.orgName"
          placeholder="请输入机构名称"
          clearable
          style="width: 240px"
        />
      </el-form-item>

      <el-form-item label="机构类型" prop="orgTypeCd">
        <el-select
          v-model="form.orgTypeCd"
          clearable
          style="width: 240px"
        >
          <el-option
            v-for="item in orgTypeCd"
            :key="item.dictValue"
            :value="item.dictValue"
            :label="item.dictLabel"
          >
          </el-option>
        </el-select>
      </el-form-item>

      <el-form-item label="机构简称" prop="orgShortName">
        <el-input
          v-model="form.orgShortName"
          placeholder="请输入机构简称"
          clearable
          style="width: 240px"
        />
      </el-form-item>
      <el-form-item label="分供方类型" prop="offerType">
        <el-select
          v-model="form.offerType"
          placeholder="分供方类型"
          clearable
          style="width: 220px"
        >
          <el-option
            v-for="item in offerType"
            :key="item.dictValue"
            :value="item.dictValue"
            :label="item.dictLabel"
          >
          </el-option>
        </el-select>
        <el-select
          v-model="form.autoConfirmFlag"
          clearable
          style="width: 220px"
        >
          <el-option
            v-for="item in autoConfirmFlag"
            :key="item.dictValue"
            :value="item.dictValue"
            :label="item.dictLabel"
          >
          </el-option>
        </el-select>
      </el-form-item>
      <el-form-item label="有效日期" prop="beginDt">
        <el-date-picker
        v-model="form.beginDt"
        style="width: 240px"
        value-format="yyyy-MM-dd"
        format="yyyy-MM-dd"
        type="daterange"
        range-separator="-"
        start-placeholder="开始日期"
        end-placeholder="结束日期"
      ></el-date-picker>
      </el-form-item>
      <el-form-item label="门市类型" prop="saleType">
        <el-select
          placeholder="门市类型"
          v-model="form.saleType"
          clearable
          style="width: 240px"
        >
          <el-option
            v-for="item in saleType"
            :key="item.dictValue"
            :value="item.dictValue"
            :label="item.dictLabel"
          >
          </el-option>
        </el-select>
      </el-form-item>
      <el-form-item label="行政区划" prop="cnName">
        <el-input
          v-model="form.cnName"
          clearable
          style="width: 240px"
        />
      </el-form-item>
      <el-form-item label="	产品发布区域" prop="productAreaType">
        <el-radio v-model="form.productAreaType" label="0">全部区域</el-radio>
        <el-radio v-model="form.productAreaType" label="1">特殊管理费指定区域</el-radio>
      </el-form-item>

      <el-form-item label="许可证号码" prop="licenseKey">
        <el-input
          v-model="form.licenseKey"
          clearable
          style="width: 240px"
        />
      </el-form-item>
      <el-form-item label="访问权限" prop="contractType">
        <el-input
          v-model="form.contractType"
          placeholder="请输入contractType名称"
          clearable
          style="width: 240px"
        />
      </el-form-item>
      <div class="titleDiv">地接社信息</div>
      <el-divider/>
      <el-form-item label="联系人" prop="linkMan">
        <el-input
          v-model="form.linkMan"
          clearable
          style="width: 240px"
        />
      </el-form-item>
      <el-form-item label="联系电话" prop="linkTel">
        <el-input
          v-model="form.linkTel"
          clearable
          style="width: 240px"
        />
      </el-form-item>

      <div class="titleDiv">开票信息</div>
      <el-divider/>
      <el-form-item label="发票抬头" prop="invoiceTitle">
        <el-input
          v-model="form.invoiceTitle"
          clearable
          style="width: 240px"
        />
      </el-form-item>
      <el-form-item label="税号" prop="invoiceNum">
        <el-input
          v-model="form.invoiceNum"
          clearable
          style="width: 240px"
        />
      </el-form-item>
      <el-form-item label="快递地址" prop="expressLocation">
        <el-input
          v-model="form.expressLocation"
          clearable
          style="width: 240px"
        />
      </el-form-item>
      <el-form-item label="开户行和账号" prop="bankNum">
        <el-input
          v-model="form.bankNum"
          clearable
          style="width: 240px"
        />
      </el-form-item>
      <el-form-item label="注册地址和账号" prop="registerTel">
        <el-input
          v-model="form.registerTel"
          clearable
          style="width: 240px"
        />
      </el-form-item>
      <!--    默认管理费    -->
      <div class="titleDiv">默认管理费</div>
      <el-divider/>

      <el-form-item label="国内管理费比例" prop="feeCent">
        <el-input
          v-model="form.feeCent"
          clearable
          style="width: 220px"
        />%
      </el-form-item>

      <el-form-item label="国外管理费比例" prop="outerFeeCent">
        <el-input
          v-model="form.outerFeeCent"
          clearable
          style="width: 220px"
        />%
      </el-form-item>
      <div class="titleDiv">特殊管理费</div>
      <el-divider/>
      <!--   特殊管理费   -->
      <el-table
        :data="feecentList"
        style="width: 100%">
        <el-table-column
          prop="tourarea"
          align="center"
          label="产品区域">
          <template #default="scope">
            <el-input v-model="scope.row.tourarea" placeholder="请输入"></el-input>
          </template>
        </el-table-column>
        <el-table-column
          prop="feecent"
          align="center"
          label="管理费比例">
          <template #default="scope">
            <el-input v-model="scope.row.feecent" placeholder="请输入"></el-input>
          </template>
        </el-table-column>

        <el-table-column
          prop="address"
          align="center"
          label="操作">
          <template #default="scope">
            <el-button
              size="mini"
              type="text"
              icon="el-icon-delete"
              @click="deleteTr(scope.row.index)"
            >删除
            </el-button>

          </template>
        </el-table-column>
      </el-table>

      <div class="titleDiv">负责人信息</div>
      <el-divider/>
      <!--   负责人信息   -->
      <el-form-item label="负责人" prop="leaderName">
        <el-input
          v-model="form.leaderName"
          clearable
          style="width: 240px"
        />
      </el-form-item>
      <el-form-item label="	手机号码" prop="orgMobileNum">
        <el-input
          v-model="form.orgMobileNum"
          clearable
          style="width: 240px"
        />
      </el-form-item>
      <el-form-item label="联系电话" prop="orgTelNum">
        <el-input
          v-model="form.orgTelNum"
          clearable
          style="width: 240px"
        />
      </el-form-item>
      <el-form-item label="	联系传真" prop="orgFaxNum">
        <el-input
          v-model="form.orgFaxNum"
          clearable
          style="width: 240px"
        />
      </el-form-item>
      <el-form-item label="联系邮箱" prop="orgEmailAddress">
        <el-input
          v-model="form.orgEmailAddress"
          clearable
          style="width: 240px"
        />
      </el-form-item>
      <el-form-item label="	联系QQ" prop="orgQqNum">
        <el-select
          v-model="form.orgQqNum"
          clearable
          style="width: 240px"
        >

        </el-select>
      </el-form-item>


      <div class="titleDiv">联系人信息</div>
      <el-form-item label="联系MSN" prop="orgMsnNum">
        <el-input
          v-model="form.orgMsnNum"
          clearable
          style="width: 240px"
        />
      </el-form-item>
      <el-form-item label="联系地址" prop="orgAddress">
        <el-input
          v-model="form.orgAddress"
          clearable
          style="width: 240px"
        />
      </el-form-item>
      <el-form-item label="付款短信号码" prop="paysmsNum">
        <el-input
          v-model="form.paysmsNum"
          clearable
          style="width: 240px"
        />
      </el-form-item>

    <div class="titleDiv">联系人信息</div>
      <el-table
        :data="linkaddressList"
        style="width: 100%">
        <el-table-column
          prop="linkaddress"
          label="区域"
          width="180">
        </el-table-column>
        <el-table-column
          prop="linkname"
          label="姓名"
          width="180">
        </el-table-column>
        <el-table-column
          prop="linkmobile"
          label="手机">
        </el-table-column>
        <el-table-column
          prop="linkphone"
          label="座机">
        </el-table-column>
        <el-table-column
          prop="linkfax"
          label="传真">
        </el-table-column>
        <el-table-column
          prop="linkqq"
          label="QQ">
        </el-table-column>
        <el-table-column
          prop="linkremark"
          label="备注">
        </el-table-column>
        <el-table-column
          prop="address"
          label="操作">
        </el-table-column>
      </el-table>

      <div class="titleDiv">财务信息</div>
      <el-divider/>

      <el-table
        :data="accttypeList"
        style="width: 100%">
        <el-table-column
          prop="accttype"
          label="财务类型"
          width="180">
        </el-table-column>
        <el-table-column
          prop="bankname"
          label="开户行/姓名"
          width="180">
        </el-table-column>
        <el-table-column
          prop="acctname"
          label="开户名/身份证">
        </el-table-column>
        <el-table-column
          prop="acctnum"
          label="账户号/联系电话">
        </el-table-column>
        <el-table-column
          prop="address"
          label="操作">
        </el-table-column>
      </el-table>
      <div class="titleDiv">合同信息</div>
      <el-divider/>
      <el-form-item label="合同编号" prop="contractCode">
        <el-input
          v-model="form.contractCode"
          clearable
          style="width: 240px"
        />
      </el-form-item>

    </el-form>
    <div slot="footer" class="dialog-footer">
      <el-button type="primary" @click="submitForm">确 定</el-button>
      <el-button @click="cancel">取 消</el-button>
    </div>
  </el-dialog>
</template>

<script>
import {add, getById, updateById} from "@/api/system/organization";
import {selectByCode} from "@/api/tool/public";

export default {
  name: "create",
  data() {
    return {
      // 弹出层标题
      title: "",
      // 是否显示弹出层
      visible: false,
      // 表单参数
      form: {
        "accessOrgId": "",
        "activeInd": '',
        "areaId": '',
        "autoConfirmFlag": '',
        "beginDt": "",
        "closeDt": "",
        "contractCode": "",
        "contractUri": "",
        "feeCent": '',
        "fullName": "",
        "leaderName": "",
        "licenseKey": "",
        "maxFee": '',
        "minFee": '',
        "offerType": '',
        "oldOfferType": '',
        "oldSaleType": '',
        "orgAddress": "",
        "orgEmailAddress": "",
        "orgFaxNum": "",
        "orgId": '',
        "orgLevel": '',
        "orgMobileNum": "",
        "orgMsnNum": "",
        "orgName": "",
        "orgQqNum": "",
        "orgShortName": "",
        "orgTelNum": "",
        "orgTypeCd": "",
        "outerFeeCent": '',
        "outerMaxFee": '',
        "outerMinFee": '',
        "parentOrgId": '',
        "productAreaType": '',
        "relOrgs": "",
        "saleType": '',
        "setDt": "",
        "smsCountNum": '',
        "linkMan": '',
        "linkTel": '',
        "state": ''
      },
      accttypeList:[
        {
          accttype:'',
          bankname:'',
          acctname:'',
          acctnum:''
        }
      ],
      linkaddressList:[
        {
          linkaddress:'',
          linkname:'',
          linkmobile:'',
          linkphone:'',
          linkfax:'',
          linkqq:'',
          linkremark:''
        }
      ],
      feecentList:[
        {
          tourarea:'',
          feecent:''
        }
      ],
      orgTypeCd: [],
      offerType: [],
      saleType: [],
      autoConfirmFlag: [],
      // 表单校验
      rules: {
        orgName: [
          {required: true, message: "机构名称不能为空", trigger: "blur"}
        ],
        licenseKey: [
          {required: true, message: "许可证不能为空", trigger: "blur"}
        ],
        linkMan: [
          {required: true, message: "联系人不能为空", trigger: "blur"}
        ],
        linkTel: [
          {required: true, message: "联系电话不能为空", trigger: "blur"}
        ],
        registerTel: [
          {required: true, message: "注册地址和账号", trigger: "blur"}
        ],


      }
    }
  },
  methods: {
    deleteTr(index){
      this.tableData.splice(index,1)
    },
    open(id) {
      if (id) {
        getById(id).then(response => {
          this.visible = true
          this.$nextTick(() => {
            this.form = response.data
          })
          this.title = "修改机构"
        })
      } else {
        this.visible = true
        this.$nextTick(() => {
          this.reset()
        })
        this.title = "新增机构"
      }
      /*查询机构类型*/
      selectByCode("orgTypeCd").then(response => {
        this.$nextTick(() => {
          this.orgTypeCd = response.data
        })
      })
      /*查询分供方类型*/
      selectByCode("offerType").then(response => {
        this.$nextTick(() => {
          this.offerType = response.data
        })
      })
      /*查询门市类型*/
      selectByCode("saleType").then(response => {
        this.$nextTick(() => {
          this.saleType = response.data
        })
      })
      /*订单确认类型*/
      selectByCode("autoConfirmFlag").then(response => {
        this.$nextTick(() => {
          this.autoConfirmFlag = response.data
        })
      })
    },
    /** 提交按钮 */
    submitForm() {
      this.$refs["form"].validate(valid => {
        if (valid) {
          if (this.form.orgId != undefined) {
            updateById(this.form).then(response => {
              this.$modal.msgSuccess("修改成功")
              this.open = false
              this.getList()
            })
          } else {
            add(this.form).then(response => {
              this.$modal.msgSuccess("新增成功")
              this.open = false
              this.getList()
            })
          }
        }
      })
    },
    // 取消按钮
    cancel() {
      this.visible = false
      this.reset()
    },
    // 表单重置
    reset() {
      this.$refs.form.resetFields()
    },
  }
}
</script>
<style lang="scss" scoped>
.titleDiv{
  color: #1E5494;
  margin-left: 30px;
}
</style>
